30. Exercise

Style Sheet Exercise

What follows is a simple exercise that will guide you through some basic experimentation with style sheets. For this exercise, you'll need a test HTML file and a CSS file. To create these, you will need a text-based HTML editor such as HomeSite, or a text editor such as Notepad.

Making the HTML test file

In working with style sheets, it's useful to have a test file that will display samples of all the styles you are using. The code below will provide a good starting file; you can add additional elements to it for other tags and classes as you create styles for them. To make the file, start your HTML or text editor and open a new file, copy the code below and paste it into the empty file, then save the file as css_test.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">



<html>

<head>

    <title>CSS Test</title>

    <!-- link to style sheet here; 

	if you want to save different sample style sheets 

	under new names, change the href value in the link 

	tag to reflect the new style sheet -->

    <link rel="stylesheet" type="text/css" href="sample1.css">

</head>

<body bgcolor="White">

<!-- Below are elements to demonstrate each of files 

in the sample1.css style sheet.  As you create your own 

style sheets with more tags and classes, you can add more 

elements to this page to view samples of your styles. -->

    <h1>This is an H1 heading</h1>

        <p class="first">

	This is a "first" 

	class paragraph</p>

    <h2>This is an H2 heading</h2>

        <p>This is a normal paragraph with 

	<b>bold</b> and 

	<i>italicized</i> text.</p>

    <h3>This is an H3 heading</h3>

        <ul>

            <li>this is a list item with a 

	dummy <a href="css_test.html">link</a> in it

        </ul>

        <pre>

        This is some

        preformatted text.

        </pre>

    <table>

    <tr>

        <th>A table heading</th>

    </tr>

    <tr>

        <td>A table data cell</td>

    </tr>

    </table>

    <p class="last">Here is a 

	"last" class paragraph</p>

</body>

</html>

Creating a sample style sheet to go with the test page

Now create the style sheet; open a new blank page in your editor. Copy and paste the code below into it, and save the file as sample1.css:

	H1 {
		font-family: Arial;
		font-size: xx-large;
		font-weight: bold;
		color: #800000;
		background: #FFFFCC;
		text-align: center;
		padding: 4pt;
		border-top: inset;
		border-bottom: inset;
		position: relative;
	}
	
	H2 {
		font-family: Arial;
		font-size: x-large;
		font-weight: bold;
		color: #FFFFCC;
		background: #800000;
		text-align: center;
		padding: 3pt;
		border-top: inset;
		border-bottom: inset;
		position: relative;
	}
	
	H3 {
		font-family: Arial;
		font-size: large;
		font-weight: bold;
		color: #800080;
		text-align: center;
		border-top: inset;
		border-bottom: inset;
		position: relative;
	}
	
	A {
		font-family: Arial;
		font-weight: bold;
		color: #0000FF;
		text-decoration: underline;
		position: relative;
	}
	
	A:LINK {
		font-family: Arial;
		font-weight: bold;
		color: #0000FF;
		text-decoration: underline;
		position: relative;
	}
	
	A:VISITED {
		font-family: Arial;
		font-weight: bold;
		color: #800080;
		text-decoration: underline;
		position: relative;
	}
	
	B {
		font-family: Arial;
		font-weight: bold;
		color: #800000;
		position: relative;
	}
	
	I {
		font-family: Arial;
		font-weight: bold;
		font-style: italic;
		position: relative;
	}
	
	LI  {
		font-family: Arial;
		font-size: medium;
		color: #000080;
		position: relative;
	}
	
	P {
		font-family: Arial;
		font-size: medium;
		color: #000080;
		position: relative;
	}
	
	TD {
		font-family: sans-serif;
		font-size: medium;
		background: #99CCCC;
	}
	
	TH {
		font-family: sans-serif;
		font-size: medium;
		font-weight: bold;
		color: #FF0000;
		background: #FFFF00;
		text-align: center;
		position: relative;
	}
	
	PRE {
		font-family: monospace;
		font-size: medium;
		background: #CCFFFF;
		position: relative;
		left: 1cm;
	}
	
	.first {
		border-top: ridge;
		border-left: ridge;
		position: relative;
	}
	
	.last {
		border-bottom: ridge;
		border-right: ridge;
	}